<template>
  <view class="pay-shopping">
    <view class="pay-shopping-left" @click="checkedAll">
      <many-radio :checked="checked"></many-radio>
      <text class="left-text">全选</text>
    </view>
     <view class="pay-shopping-right">
       <view class="total-price">
         合计：
         <view class="price">
           ￥<text class="price-number">{{store.getters['cart/selectedAccount'].toFixed(2)}}</text>
         </view>
       </view>
       <view class="settlement-btn">结算</view>
     </view>
  </view>
</template>

<script setup>
  import {ref,watch} from 'vue'
  import {useStore} from 'vuex'
  const store = useStore()
  const checked = ref(false)
  const checkedAll = () => {
    checked.value = !checked.value
    store.dispatch
  }
  watch(() => checked.value,() => {
    store.dispatch('cart/checkAllCart', checked.value)
  }, {immediate: true})
</script>

<style lang="scss">
.pay-shopping {
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  height: 120rpx;
  width: 100%;
  padding: 0 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1rpx solid #f5f5f5;
  background-color: #fff;
  z-index: 111;
  .pay-shopping-left {
    display: flex;
    align-items: center;
    .left-text {
      margin-left : 10rpx;
    }
  }
  .pay-shopping-right {
    display: flex;
    align-items: center;
    .total-price {
      display: flex;
      align-items: center;
      .price {
        color: red;
        .price-number {
          font-size: 40rpx;
        }
      }
    }
  }
  .settlement-btn {
    height: 75rpx;
    width: 150rpx;
    font-size: 34rpx;
    text-align: center;
    line-height: 75rpx;
    color: #fff;
    margin-left: 20rpx;
    border-radius: 35rpx;
    background-color: #c00000;
  }
}
</style>